<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态特性</title>
</head>
<body>
    <h1>houdunren.com</h1>
    <h1>hdcms.com</h1>
    <button id="add">添加元素</button>

    <script>
        //HTMLcollection
        //下例中通过按钮动态添加元素后,获取的元素集合是动态的,而不是上次获取的固定快照
        // let elements = document.getElementsByTagName('h1');
        // console.log(elements);
        // let button = document.querySelector("#add");
        // button.addEventListener('click',() => {
        //     //在body的最后面添加元素
        //     document.querySelector('body').insertAdjacentHTML('beforeend','<h1>向军大叔</h1>');
        //     console.log(elements);
        // });

        //使用document.querySelectorAll获取的集合是静态的
        //还是上次获取的固定快照
        // let elements = document.querySelectorAll('h1');
        // console.log(elements);
        // let button = document.querySelector("#add");
        // button.addEventListener('click',() => {
        //     document.querySelector('body').insertAdjacentHTML('beforeend','<h1>向军大叔</h1>');
        //     console.log(elements);
        // });




    </script>

</body>
</html>